<template>
  <article class="cmp cmp-encode-single">
    <section class="content-wrapper">
      <div class="content-left">
        <textarea v-model="text" placeholder="请输入文字内容"></textarea>
      </div>
      <div :class="['content-right', codeType]" ref="canvasWrapper">
        <div v-if="count === 0" class="nodata">此处预览结果</div>
        <canvas v-show="count > 0 && codeType === 'qrcode'" ref="canvas"></canvas>
        <img v-show="count > 0 && codeType === 'barcode'" ref="imgObj" />
      </div>
    </section>
    <section class="btn-wrapper">
      <x-button type="primary" block @click="createCode">生 成</x-button>
    </section>
  </article>
</template>

<script>
let QRCode = global.QRCode || null
let JsBarcode = global.JsBarcode || null

export default {
  name: 'cmp-encode-single',
  props: {
    codeType: {
      type: String,
      default: 'qrcode'
    }
  },
  data() {
    return {
      text: '',
      count: 0,
      chineseReg: /[\u2E80-\u2EFF\u2F00-\u2FDF\u3000-\u303F\u31C0-\u31EF\u3200-\u32FF\u3300-\u33FF\u3400-\u4DBF\u4DC0-\u4DFF\u4E00-\u9FBF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF]+/g
    }
  },
  watch: {
    codeType() {
      this.count = 0
      if (this.$refs.canvas) {
        let ctx = this.$refs.canvas.getContext('2d')
        ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
      }
      if (this.$refs.imgObj) {
        this.$refs.imgObj.src = ''
      }
    }
  },
  mounted() {
    this.bindEvent()
  },
  beforeDestroy() {
    this.removeEvent()
  },
  methods: {
    bindEvent() {
      window.addEventListener('resize', this.createCode)
    },
    removeEvent() {
      window.removeEventListener('resize', this.createCode)
    },
    // 生成
    createCode() {
      this.count = 0
      if (this.codeType === 'barcode') {
        this.createBarCode()
      } else {
        this.createQrCode()
      }
    },
    // 生成条形码
    createBarCode() {
      if (!this.text) return
      if (!this.$refs.imgObj) return
      if (this.chineseReg.test(this.text)) {
        this.$toast('条形码不支持中文')
        return
      }
      this.count++
      this.$nextTick(() => {
        JsBarcode(this.$refs.imgObj, this.text, {format: 'code39'})
      })
    },
    // 生成二维码
    createQrCode() {
      if (!this.text) return
      if (!this.$refs.canvas) return
      this.count++
      this.$nextTick(() => {
        let width = this.$refs.canvasWrapper.clientWidth
        QRCode.toCanvas(this.$refs.canvas, this.text, { width }, (err) => {
          if (err) console.error(err)
          console.log('success!')
        })
      })
    },
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";

.cmp-encode-single {
  height: calc(100% - 3em - 64px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .content-wrapper {
    display: flex;
    height: 20vw;

    .content-left,
    .content-right {
      border: 1px solid #e6e6e6;
      background-color: #fff;
    }

    .content-left {
      width: 0;
      flex-grow: 1;
    }

    .content-right {
      width: 20vw;
      margin-left: 1em;
      position: relative;
      .flex-center;
      &.barcode {
        width: 40vw;
      }
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }

    textarea {
      width: 100%;
      height: 100%;
      font-size: 16px;
      padding: 18px 24px;
      border: none;
      outline: 0;
      resize: none;
    }

    canvas {
      width: 100%;
      height: 100%;
    }
  }

  .btn-wrapper {
    margin-top: 1em;
  }
}
</style>
